<template>
  <el-form label-width="100px" class="form-2-layout tools-add-lang">
    <el-form-item label="操作语言类型" class="form-item-line-1">
      <el-radio-group v-model="form.radioLang">
        <el-radio value="1">操作部分</el-radio>
        <el-radio label="2">操作全部</el-radio>
        <el-radio label="3">全部替换</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="语言" v-if="form.radioLang === '1'">
      <el-select
        v-model="form.langList"
        placeholder="请选择语言"
        :multiple="true"
        clearable
        filterable
      >
        <el-option v-for="(item, i) in langs" :key="i" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    <template v-if="form.radioLang === '1' || form.radioLang === '2'">
      <el-form-item label="key值" :class="{ 'form-item-line-1': form.radioLang === '2' }">
        <el-input v-model="form.key" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item v-for="(item, i) in langConfigList" :key="i" :label="item.lang + ' 内容'">
        <el-input
          v-model="form.langConfigs[item.lang].value"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
    </template>
    <el-form-item label="默认内容" v-if="form.radioLang === '3'">
      <InputLang v-model:value="form.defaultValue" v-model:label="form.defaultKey" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import InputLang from './InputLang.vue'
const props = defineProps({ langs: Array as any })

const form = reactive({
  radioLang: '1', //语言选择
  defaultLang: 'zh-CN', //默认语言
  defaultKey: '', //默认key
  defaultValue: '', //默认value
  // 多选/全选的时候操作
  langList: [],
  langConfigs: {},
  key: ''
})

const langConfigList = computed(() => {
  if (form.radioLang == '1') {
    return form.langList.map((item: string) => {
      form.langConfigs[item] = { key: '', value: '' }
      return {
        key: '',
        value: '',
        lang: item
      }
    })
  } else {
    if (!props.langs) {
      return []
    }
    return props.langs.map((item: string) => {
      form.langConfigs[item] = { key: '', value: '' }
      return {
        key: '',
        value: '',
        lang: item
      }
    })
  }
})
</script>

<style lang="scss" scoped></style>
